<template>
    <div class="main">
        <div class="top_box">
            <el-input style="width:200px" placeholder="搜索用户名称/手机号" v-model="keyword"></el-input>
            <!-- <el-cascader style="width:200px;margin-left:20px" ref="cascader" v-model="admin_id" :props="props" clearable
                placeholder="请选择管理中心/路段"></el-cascader> -->
            <el-select style="width:200px;margin-left:20px" v-model="admin_id" placeholder="请选择管理中心">
                <el-option v-for="item in managementCenter" :key="item.id" :label="item.nickname" :value="item.id">
                </el-option>
            </el-select>
            <div style="width:400px;margin-left:10px">
                <el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
            </div>
            <el-select style="width:200px;margin-left:20px" v-model="department" placeholder="请选择部门">
                <el-option v-for="item in departmentList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
            </el-select>
            <el-button type="warning" style="margin-left:20px" icon="el-icon-search" size="small" @click="getInfo">搜索</el-button>
            <el-button style="margin-left:20px" size="small" @click="reset" type="primary">重置</el-button>
            <el-button type="primary" style="margin-left:20px" icon="el-icon-upload" size="small " @click="leadingOut">导出</el-button>
        </div>
        <el-table :data="data" style="width: 100%" border height="100%">
            <el-table-column type="index" label="序号" width="100" align="center">
            </el-table-column>
            <el-table-column prop="username" label="用户名称" min-width="100">
            </el-table-column>
            <el-table-column prop="mobile" label="用户手机号" min-width="130">
            </el-table-column>
            <el-table-column prop="admin_name" label="管理中心名称" min-width="130">
            </el-table-column>
            <el-table-column prop="department_name" label="部门名称" min-width="100">
            </el-table-column>
            <el-table-column prop="p_department_name" label="意见建议分类" width="130">
            </el-table-column>
            <el-table-column prop="road_number" label="路段编号" width="130">
            </el-table-column>
            <el-table-column label="路段名称" min-width="130">
                <template slot-scope="{row}">
                    <el-tooltip class="item" effect="dark" :content="row.road_name" placement="top">
                        <div>{{ row.road_name }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <!-- <el-table-column label="收费站/服务区" width="140">
                <template slot-scope="{row}">
                    <el-tooltip class="item" effect="dark" :content="row.p_road_name" placement="top">
                        <div>{{ row.p_road_name }}</div>
                    </el-tooltip>
                </template>
            </el-table-column> -->
            <!-- <el-table-column prop="content" label="反馈内容">
            </el-table-column> -->
            <el-table-column label="反馈图片" min-width="220">
                <template slot-scope="{row}">
                    <div style="display:flex">
                        <div v-for="(item, index) in row.img" :key="index">
                            <el-image style="width:60px;height:60px;" :src="item" v-if="item" :preview-src-list="row.img">
                            </el-image>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="是否有效工单" min-width="130">
                <template slot-scope="{row}">
                    {{ row.is_valid == 1 ? "是" : "否" }}
                </template>
            </el-table-column>
            <el-table-column label="满意度" min-width="100">
                <template slot-scope="{row}">
                    {{ comType(row.type) }}
                </template>
            </el-table-column>
            <el-table-column label="创建时间" min-width="150">
                <template slot-scope="{row}">
                    {{ comTime(row.create_time) }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="300" fixed="right">
                <template slot-scope="{ row }">
                    <div class="backfixed">

                        <el-button type="primary" @click="openDialog(row)">查看工单详情</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog title="答题详情" :visible.sync="dialogVisible">
            <nswerDetails :popRow="popRow" :answer="answer" :imgs="imgs" />
        </el-dialog>
        <el-pagination class="main-pagination" :total="total" :current-page.sync="page" :page-size="limit" layout="prev, pager, next, jumper,total" @current-change="getInfo" hide-on-single-page></el-pagination>
    </div>
</template>

<script>
import {
    get, del, post
} from "@/assets/js/http.js";
import queryString from "qs";
export default {
    components: {
        "nswerDetails": () => import("@/components/nswerDetails")
    },
    data() {
        return {
            total: 0,
            limit: 20,
            page: 1,
            keyword: "",
            admin_id: "",
            department: "",
            time: [],
            data: [],
            imgs: [],
            dialogVisible: false,
            answer: [],
            popRow: [],
            departmentList: [],
            managementCenter: [],
            // props: {
            //     label: "nickname",
            //     value: "id",
            //     lazy: true,
            //     async lazyLoad(node, resolve) {
            //         const { level, value } = node;
            //         if (level === 0) {
            //             const result = await post({
            //                 url: "/admin/answer.Subject/admin_list",
            //                 data: {}
            //             });
            //             resolve(result);
            //         } else if (level === 1) {
            //             const result = await post({
            //                 url: "/admin/answer.Road/index",
            //                 data: {
            //                     admin_id: value,
            //                     limit: 50,
            //                 }
            //             });

            //             result.data.forEach((item) => {
            //                 item.leaf = true
            //                 item.nickname = item.road_name
            //             });
            //             resolve(result.data);
            //         }
            //     },
            // },
        }
    },
    methods: {
        getInfo(index = 1) {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item => item / 1000)
            }
            post({
                url: "/admin/answer.Subject/work_order",
                data: {
                    page: index,
                    limit: this.limit,
                    type: 2,
                    time,
                    keyword: this.keyword,
                    admin_id: this.admin_id,
                    // admin_id: this.admin_id[0] || '',
                    // road_id: this.admin_id[1] || '',
                    department: this.department,
                },
                loading: true
            }).then(res => {
                console.log(res);
                this.data = res.data
                this.total = res.total          //总数
                res.data.forEach(item => {
                    let imgs = item.img.split("|")
                    item.img = imgs
                });
                this.data = res.data;

            })
        },
        // 获取管理中心列表
        getManagementCenter() {
            post({
                url: "/admin/answer.Subject/admin_list"
            }).then(res => {
                this.managementCenter = res
            })
        },
        // 获取部门列表
        getDepartment() {
            post({
                url: "admin/answer.Road/department"
            }).then(res => {
                this.departmentList = res
            })
        },
        // 重置
        reset() {
            this.keyword = ""
            this.admin_id = ""
            this.department = ""
            this.time = []
            this.getInfo()
        },
        // 导出
        leadingOut() {
            let time = []
            if (this.time.length != 0) {
                time = this.time.map(item =>
                    item / 1000
                )
            }
            open("http://nhcj.app65.cn/api/realmerit/work_export?" + queryString.stringify({
                keyword: this.keyword,
                id: localStorage.getItem('id'),
                role: localStorage.getItem('role'),
                department_id: JSON.parse(localStorage.getItem('userList')).department_id,
                type: 2,
                keyword: this.keyword,
                admin_id: this.admin_id,
                department: this.department,
                time,
            }))
        },
        openDialog(row) {
            this.dialogVisible = true
            this.answer = row.answer
            this.popRow = row
            this.imgs = row.img
        }
    },
    computed: {
        comTime() {
            return (value) => {
                var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
                var year = date.getFullYear();
                var month = ("0" + (date.getMonth() + 1)).slice(-2);
                var sdate = ("0" + date.getDate()).slice(-2);
                var hour = ("0" + date.getHours()).slice(-2);
                var minute = ("0" + date.getMinutes()).slice(-2);
                var second = ("0" + date.getSeconds()).slice(-2);
                // 拼接
                var result = year + "-" + month + "-" + sdate + " " + hour + ":" + minute //+ ":" + second;
                // 返回
                return result;
            }
        },
        comType() {
            return (data) => {
                if (data == 1) {
                    return "满意"
                } else if (data == 2) {
                    return "一般"
                } else {
                    return "不满意"
                }
            }

        }
    },
    mounted() {
        this.getInfo()
        this.getManagementCenter()
        this.getDepartment()
    }
}
</script>


<style lang="scss" scoped>
.info {
    display: flex;
    justify-content: space-between;

    .left {
        width: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .left_top {
            width: 100%;
            padding: 20px;
            background: #ffffff;
            box-shadow: inset 0px 3px 12px 1px rgba(180, 240, 255, 0.6);
            border-radius: 15px;
            position: relative;

            .title_box {
                font-size: 16px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                display: inline-block;
                padding: 5px 15px;
                color: #ffffff;
                box-sizing: border-box;
                white-space: nowrap;
                border-radius: 6px;
                background: #409eff;
                position: absolute;
                left: 50%;
                transform: translate(-50%, calc(-50% - 20px));
            }

            .lable {
                font-size: 16px;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #222222;
                line-height: 1.8em;
            }
        }
    }

    .right {
        width: 60%;
        min-height: 200px;
        background: #ffffff;
        box-shadow: inset 0px 3px 12px 1px rgba(180, 240, 255, 0.6);
        border-radius: 15px;
        padding: 30px;
        display: flex;

        .leftbox {
            width: 50%;

            .right_title {
                font-size: 20px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #222222;
            }

            .imgs {
                display: flex;

                flex-wrap: wrap;
            }
        }

        .rightbox {
            width: 50%;
        }
    }
}

.type {
    font-size: 25px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #1067b5;
    margin-top: 40px;

    .type_name {
        background: linear-gradient(90deg, #cae4ff, #ffffff);
        border-radius: 10px;
        font-size: 18px;
        font-family: Source Han Sans CN;
        font-weight: 500;
        color: #222222;
        padding: 14px;
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

::v-deep .is-checked > .el-radio__label {
    color: #409eff !important;
}

::v-deep .is-checked > .el-radio__inner {
    color: #409eff !important;
    background-color: #409eff !important;
    border-color: #e4e7ed !important;
}

::v-deep .el-date-editor {
    width: 100%;
}

::v-deep .cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

::v-deep .cell div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>